import Vue from "vue";
import VueRouter from "vue-router";//引入vue-router
// import Home from "../views/Home.vue";//同步引入组件
let Home = () => import('../views/appRight.vue');//异步：路由懒加载
let News = () => import('../views/appNews.vue');
let Users = () => import('../views/appUsers.vue');
let Sport = () => import('../views/appSport.vue');
let Tec = () => import('../views/appTec.vue');
let Detail = () => import('../views/appDetail.vue');

//解决重复点击同个路径出现bug的问题
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

Vue.use(VueRouter);//安装插件 ： VueRouter是一个中间件

//views里面一般放视图组件：路由表涉及的那些组件; pages  container
//配置路由表
const routes = [//一级路由
  {
    path : '/',
    redirect : '/home'// 重定向
  },
  {
    path : '/home',
    component : Home,
    name : 'home',
  },
  {
    path : '/news',
    // component : News,
    name : 'news',
    component : News,
    redirect : '/news/sport',
    children : [//配置子路由：二级路由
      {
        path : '/news/sport',//二级路由路径写法一
        component : Sport,
        name : 'sport',
      },
      {
        path : 'tec',//二级路由写法二  /news/tec 
        component : Tec,
        name : 'tec',
        children:[
          {
            path : 'detail/:id', // /news/tec/detail/:id 动态路由
            component : Detail,
            name : 'detail'
          }
        ]
      }
    ]
  },
  {
    path : '/users',
    component : Users,
    name : 'users',
  }

  // {
  //   path: "/",
  //   name: "Home",
  //   component: Home
  // },
  // {
  //   path: "/about",
  //   name: "About",
    // component: () =>
    //   import(/* webpackChunkName: "about" */ "../views/About.vue")
  //   component : function() { //路由懒加载的写法：做优化的一种方式：异步
  //     return import('../views/About.vue');
  //   }
  // }
];

const router = new VueRouter({
  routes
});

export default router;
